<template>
	<view class="loading_c" :style="{position,'transform':' translate(-50%, -50%)  scale('+size+')',
		background}">
		<view class="c" :style="{position,'transform': 'scale('+.7+') '}">
			<view class="s s1" data-colorb="#4596e7" data-color-after="#ef9a3d"></view>
			<view class="s s2" data-colorb="#8e2bb3" data-color-after="#ffe864"></view>
			<view class="s s3" data-colorb="#cf3c5f" data-color-after="#64af59"></view>
			<view class="s s4" data-colorb="#4dbbd6" data-color-after="#e36358"></view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			position: {
				type: String,
				default: 'fixed'
			},
			size: {
				type: Number,
				default: 1
			},
			background: {
				type: String,
				default: 'rgba(0, 0, 0, 0)'
			}
		}
	};
</script>
<style scoped>
	.loading_c {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 99999999;
		background: rgba(0, 0, 0, 0);
	}

	.c {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #e7b64f;
		position: relative;
		animation: c1 4s infinite linear;
	}

	@keyframes c1 {
		0% {
			transform: rotateZ(0);
		}

		50% {
			transform: rotateZ(180deg);
		}

		100% {
			transform: rotateZ(360deg);
		}
	}

	.s {
		width: 10px;
		height: 70px;
		position: absolute;
		left: 50%;
		top: 50%;
		animation: s1 4s infinite linear;
	}

	@keyframes s1 {
		0% {
			height: 70px;
		}

		88% {
			height: 70px;
		}

		90% {
			height: 60px;
		}

		92% {
			height: 90px;
		}

		94% {
			height: 0;
		}

		96% {
			height: 90px;
		}

		98% {
			height: 60px;
		}

		100% {
			height: 70px;
		}
	}

	.s1::before,
	.s2::before,
	.s3::before,
	.s4::before {
		width: 5px;
		height: 5px;
		background-color: attr(data-colorb);
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		border-radius: 50%;
		transform: translate(-50%, -50%);
	}

	.s1::after,
	.s2::after,
	.s3::after,
	.s4::after {
		width: 5px;
		height: 5px;
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		border-radius: 50%;
		transform: translate(-50%, 50%);
	}

	.s1 {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	.s1::before {
		background-color: #4dbbd6;
	}

	.s1::after {
		background-color: #e36358;
	}

	.s2 {
		transform: translate(-50%, -50%) rotateZ(45deg);
	}

	.s2::before {
		background-color: #cf3c5f;
	}

	.s2::after {
		background-color: #64af59;
	}

	.s3 {
		transform: translate(-50%, -50%) rotateZ(90deg);
	}

	.s3::before {
		background-color: #8e2bb3;
	}

	.s3::after {
		background-color: #ffe864;
	}

	.s4 {
		transform: translate(-50%, -50%) rotateZ(135deg);
	}

	.s4::before {
		background-color: #4596e7;
	}

	.s4::after {
		background-color: #ef9a3d;
	}
</style>
</style>